<!--
 * @Author: pengyong
 * @Date: 2021-03-28 09:19:12
 * @LastEditors: pengyong
 * @LastEditTime: 2021-03-28 10:10:41
 * @Description: 服务商工单
 * @FilePath: /kuilong_web_new/src/views/serviceprovider/serviceorder/index.vue
-->
<template>
  <div class="app-container">
    <eHeader :query="query" @click-drop="handleClickDrop" />
    <!--表格渲染-->
    <el-table ref="multipleTable" v-loading="loading" :data="data" size="small" style="width: 100%;" height="500">
      <el-table-column type="selection" width="55" />
      <el-table-column :show-overflow-tooltip="true" prop="orderCode" label="工单编号" />
      <el-table-column :show-overflow-tooltip="true" prop="customerName" label="客户名称" />
      <el-table-column :show-overflow-tooltip="true" prop="supplierName" label="服务商名称" />
      <el-table-column :show-overflow-tooltip="true" label="任务地区">
        <template slot-scope="scope">
          <span v-if="scope.row.orderSource===2">{{ parseArea(scope.row.task) }}</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="address" :formatter="formatAddress" label="详细地址" />
      <el-table-column :show-overflow-tooltip="true" prop="content" label="服务内容" />
      <el-table-column :show-overflow-tooltip="true" prop="actualServiceTime" label="服务时长" />
      <el-table-column :show-overflow-tooltip="true" label="服务评价">
        <template slot-scope="scope">
          {{ parseSatisfaction(scope.row.satisfaction) }}
        </template>
      </el-table-column>
      <!--
      <el-table-column :show-overflow-tooltip="true" prop="orderSource" label="工单类型">
        <template slot-scope="scope">
          <div v-for="item in orderOptions" :key="item.value">
            <el-tag v-show="scope.row.orderSource === item.value">{{ item.name }}</el-tag>
          </div>
        </template>
      </el-table-column>
      -->
      <el-table-column prop="status" label="工单状态">
        <template slot-scope="scope">
          <div v-for="item in statusOptions" :key="item.value">
            <el-tag v-show="scope.row.status.toString() === item.value">{{ item.label }}</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
  </div>
</template>

<script>
import eHeader from './module/header'
import initData from '@/mixins/initData'
import { get } from '@/api/dictDetail'
import { parseTime } from '@/utils/index'
import { WORKORDER_TYPES } from '@/constants/consts'

export default {
  components: {
    eHeader
  },
  mixins: [initData],
  data() {
    return {
      statusOptions: [],
      orderOptions: WORKORDER_TYPES,
      serviceLevelOptions: []
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
      this.getDict('service_level')
      this.getDict('order_status')
    })
  },
  methods: {
    parseTime,
    beforeInit() {
      this.url = 'api/tWorkOrder/toclose'
      this.params = { page: this.page, size: this.size }
      const query = this.query
      // 开始结束时间
      if (query.finishTimeBegin) {
        this.params.finishTimeBegin = query.finishTimeBegin
      }
      if (query.finishTimeEnd) {
        this.params.finishTimeEnd = query.finishTimeEnd
      }
      if (query.status) {
        this.params.statusEx = query.status
      }
      if (query.supplierName) {
        this.params.supplierName = query.supplierName
      }
      if (query.customerName) {
        this.params.customerName = query.customerName
      }
      if (query.orderCode) {
        this.params.orderCode = query.orderCode
      }
      if (query.taskAddr) {
        this.params.taskAddr = query.taskAddr
      }
      return true
    },
    // 批量操作
    handleClickDrop(type) {
      switch (type) {
        case 'end':
          this.handleEndOrder()
          break
      }
    },
    handleEndOrder() {
      const { selection } = this.$refs.multipleTable
      if (!selection || !selection.length) {
        this.$message.warning('请选择要结算的工单')
        return
      }
    },
    async getDict(name) {
      return new Promise((resolve, reject) => {
        get(name).then(res => {
          if (name === 'order_status') {
            this.statusOptions = res.content
          } else if (name === 'fault_type') {
            const content = [].concat(res.content)
            const _this = this
            content.forEach(function(data, index) {
              const faultTypeOption = { id: data.id, name: data.label }
              _this.faultTypeOptions.push(faultTypeOption)
            })
          } else {
            const content = [].concat(res.content)
            const _this = this
            content.forEach(function(data, index) {
              const serviceLevelOption = { id: data.id, name: data.label }
              _this.serviceLevelOptions.push(serviceLevelOption)
            })
            console.log(_this.serviceLevelOptions)
          }
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    formatAddress(row, column) {
      if (row.orderSource === 2) {
        return row.task.taskAddr
      }
      if (row.orderSource === 1) {
        return row.accident.address
      }
      return row.address
    },
    parseArea(task) {
      return task.country + '/' + task.province + '/' + task.city + '/' + task.county
    },
    parseSatisfaction(val) {
      if (val === 0) {
        return '不满意'
      } else if (val === 1) {
        return '基本满意'
      } else if (val === 2) {
        return '满意'
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
